<template>
  <div>
    <div class="top">
      <p>摄像管理</p>
    </div>

    <div class="selects">
      <el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="150px">
          <el-col :span="8">
            <el-form-item label="摄像头名称：">
              <el-select v-model="form.cameraName"
                         placeholder="全部">
                <el-option label="全部"
                           value="1"></el-option>
                <el-option label="摄像头1"
                           value="2"></el-option>
                <el-option label="摄像头2"
                           value="3"></el-option>
                <el-option label="摄像头3"
                           value="4"></el-option>
                <el-option label="摄像头4"
                           value="5"></el-option>
                <el-option label="摄像头5"
                           value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="摄像头编码：">
              <el-select v-model="form.cameraCoding"
                         placeholder="全部">
                <el-option label="全部"
                           value="01"></el-option>
                <el-option label="SN235"
                           value="02"></el-option>
                <el-option label="0002"
                           value="03"></el-option>
                <el-option label="0003"
                           value="04"></el-option>
                <el-option label="0004"
                           value="05"></el-option>
                <el-option label="0005"
                           value="06"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="绑定状态：">
              <el-select v-model="form.bindingStatus"
                         placeholder="全部">
                <el-option label="全部"
                           value="001"></el-option>
                <el-option label="已绑定"
                           value="002"></el-option>
                <el-option label="未绑定"
                           value="003"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机器人：">
              <el-select v-model="form.robot"
                         placeholder="全部">
                <el-option label="全部"
                           value="0001"></el-option>
                <el-option label="机器人1 JQR001"
                           value="0002"></el-option>
                <el-option label="机器人2 JQR002"
                           value="0003"></el-option>
                <el-option label="机器人3 JQR003"
                           value="0004"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16"
                  class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
          <el-col :span="24">
            <el-button type="primary"
                       @click="dialogVisible = true"
                       icon="el-icon-plus">新增摄像头</el-button>
          </el-col>
        </el-form>
      </el-row>

      <el-dialog title="新增摄像头"
                 :visible.sync="dialogVisible"
                 width="30%">

        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 :rules="rules">
          <el-form-item label="摄像头名称："
                        prop="cameraName"
                        label-width='130px'>
            <el-input placeholder="请输入"
                      v-model="form.cameraName"></el-input>
          </el-form-item>
          <el-form-item label="摄像头编码："
                        prop="cameraCoding"
                        label-width='130px'>
            <el-input v-model="form.cameraCoding"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="绑定状态："
                        label-width='130px'>
            <el-input v-model="form.bindingStatus"
                      placeholder="未绑定"></el-input>
          </el-form-item>
          <el-form-item label="所属机器人："
                        label-width='130px'>
            <el-input v-model="form.robot"
                      placeholder="无"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea"
                      v-model="form.remarks"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </div>

    <el-row>
      <el-table :data="tableData"
                height="506"
                :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }">
        <el-table-column prop="num"
                         label="序号"
                         align="center">
        </el-table-column>
        <el-table-column prop="cameraName"
                         label="摄像头名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="cameraCoding"
                         label="摄像头编码"
                         align="center">
        </el-table-column>
        <el-table-column prop="bindingStatus"
                         label="绑定状态"
                         align="center">
        </el-table-column>
        <el-table-column prop="robot"
                         label="所属机器人"
                         align="center">
        </el-table-column>
        <!-- <el-table-column prop="remarks"
                         label="备注"
                         align="center">
        </el-table-column> -->

        <el-table-column label="操作"
                         align="center"
                         width="350">

          <template>
            <el-button type="text">预览</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text"
                       @click="unbinding()">解绑</el-button>
            <el-button type="text">绑定</el-button>
            <el-button type="text"
                       @click="del()">删除</el-button>

          </template>

        </el-table-column>
      </el-table>
    </el-row>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10,20,30,50,100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="100"
                   background
                   align="center">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      dialogVisible: false,
      tableData: [
        {
          num: '1',
          cameraName: '摄像头1',
          cameraCoding: 'SN235',
          bindingStatus: '已绑定',
          robot: '机器人1',
          remarks: ''
        },
        {
          num: '2',
          cameraName: '摄像头2',
          cameraCoding: '0005',
          bindingStatus: '已绑定',
          robot: '机器人3',
          remarks: ''
        },
        {
          num: '3',
          cameraName: '摄像头1',
          cameraCoding: '0002',
          bindingStatus: '未绑定',
          robot: '机器人1',
          remarks: ''
        },
        {
          num: '4',
          cameraName: '摄像头5',
          cameraCoding: 'SN235',
          bindingStatus: '已绑定',
          robot: '机器人2',
          remarks: ''
        },
        {
          num: '5',
          cameraName: '摄像头3',
          cameraCoding: '0004',
          bindingStatus: '未绑定',
          robot: '机器人2',
          remarks: ''
        },
        {
          num: '6',
          cameraName: '摄像头4',
          cameraCoding: '0003',
          bindingStatus: '已绑定',
          robot: '机器人3',
          remarks: ''
        },
        {
          num: '7',
          cameraName: '摄像头2',
          cameraCoding: 'SN235',
          bindingStatus: '未绑定',
          robot: '机器人1',
          remarks: ''
        },
        {
          num: '8',
          cameraName: '摄像头4',
          cameraCoding: '0002',
          bindingStatus: '已绑定',
          robot: '机器人3',
          remarks: ''
        },
        {
          num: '9',
          cameraName: '摄像头2',
          cameraCoding: '0005',
          bindingStatus: '已绑定',
          robot: '机器人3',
          remarks: ''
        },
        {
          num: '10',
          cameraName: '摄像头1',
          cameraCoding: '0002',
          bindingStatus: '已绑定',
          robot: '机器人3',
          remarks: ''
        }
      ],
      form: {
        cameraName: '',
        cameraCoding: '',
        bindingStatus: '',
        robot: '',
        remarks: ''
      },
      rules: {
        cameraName: [
          { required: true, message: '请输入摄像头名称', trigger: 'blur' }
        ],
        cameraCoding: [
          { required: true, message: '请输入摄像头编码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset () {
      this.form.cameraName = '',
        this.form.cameraCoding = '',
        this.form.bindingStatus = '',
        this.form.robot = ''
    },
    del () {
      this.$confirm('确定删除此摄像头？', '删除摄像头', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    unbinding () {
      this.$confirm('确定解除绑定此摄像头？', '解绑摄像头', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '解绑成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        });
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  padding-bottom: 20px;
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/deep/ .el-dialog__header {
  text-align: center;
  flex: 1;
  height: 60px;
  line-height: 30px;
  background: #1890ff;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

/deep/ .el-dialog__close {
  color: #ffffff;
}

/deep/ .el-row {
  padding: 0 20px;
}

/deep/ .el-pagination {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
}
</style>